<template>
  <div class="ranking">
    <div class="ranking-top">
      <router-link tag="div" to="/home" class="left">
        <span class="iconfont icon-arrow-left-bold"></span>
        排行榜
      </router-link>
      <div class="right">
        <p>定制首页榜单</p>
      </div>
    </div>
    <div class="rankinglist">
      <ul>
        <li><span class="con">官方</span></li>
        <li><span>精选</span></li>
        <li><span>曲风</span></li>
        <li><span>全球</span></li>
        <li><span>语种</span></li>
        <li><span>MV</span></li>
        <li><span>特色</span></li>
      </ul>
    </div>
    <div class="recommend">
      <div class="top">榜单推荐</div>
      <div class="below">
        <ul>
          <li>
            <div class="p">编辑推荐榜</div>
            <span></span>
            <div class="i">每月更新</div>
          </li>
          <li>
            <div class="p">编辑推荐榜</div>
            <span></span>
            <div class="i">每月更新</div>
          </li>
          <li>
            <div class="p">编辑推荐榜</div>
            <span></span>
            <div class="i">每月更新</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="official">
      <div class="top"><span class="iconfont icon-caidan"></span> 官方榜</div>
      <div class="bottoms">
        <ul>
          <li v-for="item in ranking" :key="item.id">
            <div class="listtop">
              <div class="left">{{ item.name }}</div>
              <div class="rigth">{{ item.updateFrequency }}</div>
            </div>
            <div class="listbottom">
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="new">
                <div
                  class="lis"
                  v-for="(num, index) in item.tracks"
                  :key="index"
                >
                  <div class="liss">
                    <span>{{ index }}</span>
                    <div class="middle">
                      {{ num.first }} <span>-{{ num.second }}</span>
                    </div>
                  </div>
                  <div class="rigth">新</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入接口
import { getRanking } from "../api/player";
export default {
  data() {
    return {
      ranking: [],
    };
  },
  methods: {
    getrankingFun() {
      getRanking().then((data) => {
        // console.log(data, "排行榜数据");
        this.ranking = data.list;
      });
    },
  },
  created() {
    this.getrankingFun(); //排行榜数据
  },
};
</script>

<style lang="less">
.ranking {
  width: 100%;
  background-color: #f7f9fc;
  .ranking-top {
    height: 46px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    // position: fixed;
    // top: 0px;
    // left: 0px;
    .left {
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 20px;
      span {
        display: inline-block;
        width: 40px;
        height: 46px;
        font-size: 16px;
      }
    }
    .right {
      margin-right: 15px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #d7dbe3;
      border-radius: 40px;
      margin-top: 7px;
      p {
        margin: 0px 12px;
        font-size: 16px;
      }
    }
  }
  .rankinglist {
    width: 100%;
    // position: fixed;
    // top: 0px;
    // left: 0px;
    // margin-top: 46px;
    overflow-x: scroll;
    ul {
      height: 41px;
      display: flex;
      overflow: auto;
      margin-left: 16px;
      li {
        height: 41px;
        width: 68px;
        display: flex;
        flex-shrink: 0;
        span {
          display: block;
          height: 41px;
          // width: 100%;
          line-height: 41px;
          color: #7a808f;
          position: relative;
          font-size: 16px;
          text-align: center;
          position: relative;
          &.con {
            color: #32394b;
            font-weight: 600;
            //        &:target{
            //         position: absolute;
            //         top: 0px;
            //         left: 0px;
            //         background-color: red;
            //         width: 10px;
            //         height: 5px;
            //   }
          }
        }
      }
    }
  }
  .recommend {
    display: flex;
    flex-direction: column;
    // margin-top: 100px;
    .top {
      height: 51px;
      line-height: 51px;
      width: 100%;
      font-size: 20px;
      color: #2f3648;
      font-weight: 800;
      margin-left: 15px;
    }
    .below {
      // display: flex;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          width: 28%;
          background-color: #7596cc;
          display: flex;
          flex-direction: column;
          border-radius: 10px;
          // margin-left: 20px;

          .p {
            height: 38px;
            line-height: 38px;
            text-align: center;
            margin-top: 18px;
            color: #fff;
            font-size: 17px;
          }
          span {
            display: block;
            width: 80%;
            height: 1px;
            background: rgba(255, 255, 255, 0.8);
            text-align: center;
            margin-left: 11px;
          }
          .i {
            height: 24px;
            line-height: 24px;
            text-align: center;
            margin-top: 5px;
            margin-bottom: 20px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }
  .official {
    margin-top: 30px;
    .top {
      height: 57px;
      width: 100%;
      line-height: 57px;
      // text-align: center;
      margin-left: 15px;
      font-size: 20px;
      .iconfont {
        font-size: 20px;
      }
    }
    .bottoms {
      ul {
        li {
          display: flex;
          flex-direction: column;
          width: 91%;
          background-color: #ffffff;
          border-radius: 10px;
          margin-left: 15px;
          margin-bottom: 17px;
          .listtop {
            display: flex;
            justify-content: space-between;
            height: 47px;
            .left {
              height: 47px;
              line-height: 47px;
              margin-left: 20px;
              font-weight: 800;
              font-size: 20px;
            }
            .rigth {
              height: 47px;
              line-height: 47px;
              margin-right: 12px;
              font-size: 12px;
              color: #acafb6;
            }
          }
          .listbottom {
            display: flex;
            flex-direction: row;
            .img {
              margin-left: 20px;
              margin-bottom: 17px;
              img {
                width: 64px;
                height: 64px;
                border-radius: 5px;
              }
            }
            .new {
              display: flex;
              flex: 1;
              flex-direction: column;
              .lis {
                height: 22px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                .liss {
                  display: flex;
                  height: 22px;
                  line-height: 22px;
                  span {
                    height: 21px;
                    width: 21px;
                    text-align: center;
                    font-weight: 600;
                    font-size: 13px;
                  }
                  .middle {
                    height: 21px;
                    line-height: 21px;
                    font-weight: 600;
                    overflow: hidden;
                    font-size: 14px;
                    span {
                      font-weight: 400;
                    }
                  }
                }
                .rigth {
                  width: 14px;
                  color: green;
                  margin-right: 14px;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>